@import 'reset';

* {
  @extend .reset;
}

/*variables*/
$initial-font-size: 62.5%;

$logo-height: 6em;
$menu-width: 18em;
$buttons-height: 5em;
$tabs-header-height: 4%;

$font: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;

$c-dark-gray: #3e454c;
$c-medium-gray: #999999;
$c-light-gray: #d9d9d9;
$c-lighter-gray: #e1e1e1;
$c-white: #efefef;
$c-orange: #f26522;
$c-sport: #75F222;
$c-social: #223EF2;
$c-work: #F22222;

/*mixins, functions and extends*/
@function font-size-formula($resolution-width) {
  @return ($resolution-width / 1200) * $initial-font-size;
}

.border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@mixin task-category($color) {
  /*border-width: 1px;
  border-style: solid;
  border-color: rgba($color, 0.6);*/
  color: $c-white;
  background-color: rgba($color, 0.6);

  &:hover {
    background-color: rgba($color, 0.8);
  }
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-size: $initial-font-size;
  font-family: $font;
}

#wrapper {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  position: relative;

  #mobile-menu-button{
    display: none;
  }

  #logo-container {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height: $logo-height;

    #logo {
      position: absolute;
      float: left;
      width: $menu-width;
      height: 100%;
      background: url('../img/logo.png');
      background-size: $menu-width $logo-height;
      background-repeat: no-repeat;
    }

    #logo-bg {
      @extend .border-box;
      margin-left: $menu-width;
      width: 100%;
      height: 100%;
      background: url('../img/logo-bg.png');
      background-size: 0.2em $logo-height;
      background-repeat: repeat-x;
    }

    & > h1 {
      display: none;
    }

    h1 {
      font-size: 3em;
      color: #000000;
    }
  }

  #calendar {
    @extend .border-box;
    position: relative;
    background-color: $c-white;
    margin-left: $menu-width;
    height: 100%;
    padding: 2em;

    #buttons {
      position: absolute;
      height: $buttons-height;
      top: $logo-height;
      z-index: 3;

      input {
        @extend .border-box;
        display: inline-block;
        font-family: $font;
        font-weight: bold;
        font-size: 1.4em;
        width: 2em;
        height: 2.1em;
        margin-top: 1.5em;
        margin-bottom: 1.5em;
        padding-top: 0.3em;
        padding-bottom: 0.3em;
        text-align: center;
        background-color: $c-white;
        border: 1px solid $c-medium-gray;
        color: $c-dark-gray;
      }

      input:hover {
        background-color: $c-light-gray;
      }

      #today-button {
        border-width: 1px 0 1px 0;
        width: 5em;
      }
    }

    #tabs {
      padding: 0;
      height: 100%;
      padding-top: $logo-height + $buttons-height - 1em;
      @extend .border-box;

      .views {
        padding: 0;
      }

      .ui-tabs-nav {
        width: $menu-width;
        top: $logo-height + 23em;
        position: absolute;
        left: - $menu-width - 2.2em;
        z-index: 3;

        .ui-state-default {
          width: $menu-width;
          padding: 0;

          a {
            @extend .border-box;
            color: $c-white;
            font-size: 2em;
            width: 100%;
            text-align: right;
          }

          a:hover {
            color: $c-light-gray;
            background-color: rgba(216, 218, 219, 0.15);
          }
        }

        .ui-tabs-active {
          background-color: $c-white;

          a {
            color: $c-orange;
          }

          a:hover {
            color: $c-orange;
            background-color: rgba(216, 218, 219, 0.5);
          }
        }
      }

      #agenda-view,
      #week-view,
      #month-view {
        @extend .border-box;
        color: $c-dark-gray;
        height: 100%;

        .table {
          @extend .border-box;
          font-size: 1.8em;
          height: 100%;

          .tr {
            .th, .td {
              @extend .border-box;
              border: 1px $c-white solid;
              display: inline-block;
              width: (100% / 7);
            }

            .th {
              height: $tabs-header-height;
              text-align: right;
            }

            .td {
              @extend .border-box;
              overflow: hidden;
              background-color: $c-light-gray;
              height: 100%;
              padding: 0em 0.2em 0.2em 0.2em;

              .tasks {
                position: relative;
                overflow: hidden;
                display: inline-block;
                @extend .border-box;
                width: 100%;
                font-size: 0.8em;
                cursor:pointer;

                @include task-category($c-dark-gray);

                p {
                  margin: 0 0.3em 0 0.3em;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }

                .task-name {
                  width: 85%;
                  text-align: left;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }

                .task-note {
                  display: none;
                }

                .task-close-button {
                  /*z-index: 15;*/
                  width: 12%;
                  position: absolute;
                  right: 0.2em;
                  top: 0.2em;
                  text-align: center;
                  font-size: 0.8em;
                  display: inline-block;

                  &:hover{
                    background-color: rgba(0,0,0,0.1);
                  }
                }
              }

              .sport {
                @include task-category($c-sport);
              }

              .social {
                @include task-category($c-social);
              }

              .work {
                @include task-category($c-work);
              }
            }
          }
        }
      }

      #agenda-view,
      #week-view {
        .table {
          .tr:nth-of-type(2) {
            height: 100% - $tabs-header-height;

            .td {
              padding-top: 0.2em;
            }
          }
        }
      }
    }

    #tabs #month-view {
      div.table {
        .caption {
          text-align: right;
          height: $tabs-header-height;
        }

        div.tr {
          height: (100% - ($tabs-header-height * 2)) / 6;

          .th {
            background-color: $c-lighter-gray;
          }

          .td {
            $p-height: 1.2em;
            overflow: hidden;
            display: inline-block;

            & > p {
              height: $p-height;
              text-align: right;
            }
          }

          & .mini-current-month:nth-of-type(6),
          & .mini-current-month:nth-of-type(7){
            color: $c-orange;
          }

          div.today{
            background-color: rgba($c-dark-gray, 0.5);
            color: $c-white;
          }
        }

        div.mini-other-month {
          color: $c-white;
        }

        & > div:nth-of-type(2) {
          height: $tabs-header-height;
        }
      }
    }

    #year-view {
      @extend .border-box;
      color: $c-dark-gray;
      height: 100%;

      .today p{
        background-color: $c-medium-gray;
        font-weight: bolder;
      }

      & > .table {
        @extend .border-box;
        font-size: 1.8em;
        height: 100%;

        .month {
          @extend .border-box;
          margin: 0.5%;
          width: (96% / 4);
          height: (97% / 3);
          display: inline-block;

          .table {
            @extend .border-box;
            /*padding: 3%;*/
            width: 100%;
            height: 100%;
            background-color: $c-light-gray;

            .caption {
              text-align: center;
              background-color: $c-white;
              font-weight: bold;
            }

            & > .tr {
              height: (100% / 8);
              margin: 0 3% 0 3%;

              .th, .td {
                display: inline-block;
                width: (100% / 7);
                height: 100%;
                text-align: center;
                vertical-align: middle;
              }

              div.td.mini-current-month p:hover {
                background-color: $c-medium-gray;
                color: $c-white;
              }

              .th:nth-of-type(6n), .th:nth-of-type(7n),
              .td:nth-of-type(6n), .td:nth-of-type(7n) {
                color: $c-orange;
              }

              div.td.mini-other-month {
                color: $c-white;
              }

              .td p{
                margin: 0.05em;
              }

              .got-task p{
                background-color: $c-white;
                color: $c-dark-gray;
                /*background-color: $c-medium-gray;
                color: $c-white;*/
              }

              .today p{
                background-color: $c-orange;
                color: $c-white;
              }
            }

            & > div:nth-of-type(1) {
              font-weight: bold;
            }

            & > div:nth-of-type(2) {
              font-weight: bold;
              @extend .border-box;
              border-bottom: 1px solid $c-dark-gray;
            }
          }
        }
      }
    }
  }
}

#menu {
  background-color: $c-dark-gray;
  position: absolute;
  left: 0;
  top: 0;
  width: $menu-width;
  height: 100%;
  @extend .border-box;
  padding: 0.5em;
  padding-top: $logo-height;
  box-shadow: 0.2em 0 1em $c-dark-gray;

  #create-task-button {
    @extend .border-box;
    font-family: $font;
    font-weight: bold;
    font-size: 1.4em;
    width: 100%;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    background-color: $c-white;
    border: 1px solid $c-medium-gray;
    color: $c-dark-gray;
  }

  #create-task-button:hover {
    background-color: $c-lighter-gray;
  }

  #mini-month-view {
    color: $c-white;
    font-size: 1.4em;
    position: relative;

    .tasks{
      display: none;
    }

    #mini-previous-button,
    #mini-next-button {
      @extend .border-box;
      position: absolute;
      font-size: 1em;
      width: 16%;
      height: 14%;
      color: $c-white;
      background-color: transparent;
      font-weight: bold;
      /*border: 1px solid $c-white;*/
      border: none;
    }

    #mini-previous-button:hover,
    #mini-next-button:hover {
      background-color: $c-white;
      color: $c-dark-gray;
    }

    #mini-previous-button {
      left: 0;
    }

    #mini-next-button {
      right: 0;
    }

    .table {
      width: 100%;
      @extend .border-box;

      .tr {
        width: 100%;

        @extend .clearfix;
      }

      .caption, .th, .td {
        text-align: center;
      }

      .th, .td {
        float: left;
        width: (100%/7);
      }

      .caption {
        margin-bottom: 0.5em;
        background-color: $c-dark-gray;
        color: $c-white;
        font-weight: bold;
      }

      .th {
        border-bottom: 1px solid $c-white;
        background-color: $c-dark-gray;
        color: $c-white;
        font-weight: bold;
      }

      .th:nth-of-type(6n),
      .th:nth-of-type(7n),
      .td:nth-of-type(6n),
      .td:nth-of-type(7n) {
        color: $c-orange;
      }

      .td.mini-other-month {
        color: $c-medium-gray;
      }

      .td.mini-month-hover:hover p{
        background-color: $c-white;
        color: $c-dark-gray;
      }

      .td p{
        margin: 0.05em;
      }

      .got-task p{
        background-color: $c-white;
        color: $c-dark-gray;
        /*background-color: $c-medium-gray;
        color: $c-white;*/
      }

      .today p{
        background-color: $c-orange;
        color: $c-white;
      }

      .clearfix {
        @extend .clearfix;
      }
    }
  }
}

.ui-dialog {
  @extend .border-box;
  padding: 0;
  border: 1px solid $c-dark-gray;
  font-size: 16px;
  background-color: $c-white;
  color: $c-dark-gray;
  box-shadow: 0px 0px 25px black;

  .ui-button{
    width: 50px;
    height: 28px;
  }

  .ui-button-text{
    font-size: 12px;
    color: $c-dark-gray;
    text-indent: 0;
  }

  #create-task-form {
    @extend .border-box;

    hr {
      clear: both;
      visibility: hidden;
    }

    p {
      display: inline-block;
    }

    input, select {
      float: right;
      width: 140px;
    }

    textarea {
      width: 98%;
      height: 90px;
      resize: none;
      overflow: auto;
    }

    input[type=button] {
      width: 100%;
      padding: 3%;
      display: inline-block;
      font-size: 1em;
      border: none;
      font-weight: bold;
      background-color: $c-dark-gray;
      color: $c-white;

      &:hover {
        background-color: $c-medium-gray;
      }
    }

    #form-save-button{
      width: 48%;
      float: left;
    }

    #form-delete-button{
      width: 48%;
      float: right;
    }
  }
}

#ui-datepicker-div{
  font-size: 1.2em;
  border: 1px solid $c-dark-gray;
  background-color: $c-white;
  color: $c-dark-gray;
  box-shadow: 0px 0px 25px black;

  .ui-datepicker-prev,
  .ui-datepicker-next{

    span{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      top: 0;
      left: 0;

      font-size: 3em;
      color: $c-white;
      background-color: $c-dark-gray;
    }
  }

  .ui-datepicker-today{
    background-color: $c-dark-gray;

    a{
      color: $c-white;
      font-weight: bold;
    }
  }

  a{
    color: $c-dark-gray;
    text-align: center;
  }

  th{
    border-bottom: 1px solid $c-dark-gray;
  }

  .ui-datepicker-title{
    font-weight: bold;
  }

  button{
    background-color: $c-dark-gray;
    color: $c-white;
    font-weight: bold;
    border: none;

    &:hover{
      background-color: $c-medium-gray;
    }
  }
}

/*media queries*/

@media only screen and (max-width: 1024px) {
  body {
    font-size: font-size-formula(1024);
  }
}

@media only screen and (max-width: 960px) {
  body {
    font-size: font-size-formula(960);
  }
}

@media only screen and (max-width: 780px) {
  body {
    font-size: font-size-formula(780);
  }
}

@media only screen and (max-width: 640px) {
  body {
    font-size: font-size-formula(640);

    #wrapper {
      #menu, .ui-tabs-nav, #mini-month-view {
        display: none;
      }

      #menu{
        width: 100%;
        height: 100%;
        z-index: 4;
        padding-left: 0;
        padding-right: 0;

        #create-task-button{
          font-size: 3em;
          height: 3em;
          width: 100%;
        }
      }

      #logo-container{
        background-color: $c-dark-gray;
        height: $logo-height * 1.2;
        z-index: 6;

        #logo, #logo-bg {
          background-position: center bottom;
          z-index: 7;
        }
      }

      #mobile-menu-button{
        display: block;
        width: 40px;
        height: 40px;
        background-color: transparent;
        color: $c-orange;
        border: none;
        z-index: 8;
        position: absolute;
        top: 0;
        right: 0;
        font-size: 25px;
        font-weight: bolder;
      }

      div#calendar {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding-top: 0;

        div#tabs {
          display: block;
          width: 100%;

          ul.ui-tabs-nav{
            z-index: 10;
            top: $logo-height * 3.5;
            left: 0;
            width: 100%;

            li.ui-state-default{
              width: 100%;
              /*height: 5em;*/
              font-size: 1.8em;
              border-top: 1px dotted $c-orange;

              &:last-child{
                border-bottom: 1px dotted $c-orange;
              }

              a{
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 480px) {
  body {
    font-size: font-size-formula(480);
  }
}

@media only screen and (max-width: 320px) {
  body {
    font-size: font-size-formula(320);
  }
}
